@extends('mobile.layouts.layout')
@section('style')
    <link rel="stylesheet" href="{{asset("css/wapshow.css")}}" type="text/css"/>
@endsection
@section('content')
    <style>
        .footer{
            display: none;
        }
    </style>
    <div class="detail-img">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                @if(count($goods->pictures) > 0)
                    @foreach($goods->pictures as $picture)
                        <div class="swiper-slide">
                            <img src="{{get_image_url($picture)}}"/>
                        </div>
                    @endforeach
                @endif
            </div>
            <div class="swiper-pagination swiper-pagination-white"></div>
        </div>
    </div>
    <div class="detail-info">
        <p class="name goods-title">{{$goods->name}}</p>

        @if($goods->coupon_status >0)
            <div class="goods-original-box">
                <p class="original-price">
                    <span class="price">@if(!empty($goods->from_site)){{$goods->from_site}}价@endif ￥{{$goods->price}}</span>
                    <span class="volume pingfang">月销{{$goods->volumev or 0}}</span></p>
            </div>
            <div class="goods-price-box">
                <p class="goods-price">
                    <span class="tips">券后</span>
                    <span class="price">￥{{$goods->coupon_price}}</span>

                </p>
            </div>
        @else
            <div class="goods-price-box">
                <p class="goods-price">
                    <span class="price">￥{{$goods->coupon_price}}</span>
                    <span class="volume pingfang">月销{{$goods->volumev or 0}}</span>
                </p>
            </div>
        @endif


    </div>

    <div class="tuwen-tkl">
        <!-- $this->isIOS==2 表示微信端-->
        <div class="tkl">
            <div class="tkl-code yjfz_copy">
                <div class="code">
                    <textarea class="tkl-text" onfocus="iptNum(this, true);" oninput="iptNum(this, false);">{{$goods->tpwd}}</textarea>
                    <span class="keycope" data-tpwd="">一键复制</span>
                </div>
            </div>
            <p class="tkl-desp">长按复制上方淘口令，打开手机淘宝购买</p>
        </div>
        <script>
        </script>

        <div class="pic-detail">
            <div class="pic-detail-btn" data-goodsid="{{$goods->original_id}}">
                <span class="pic-detail-btn-span">查看图文详情<i></i></span>
            </div>
            <div class="pic-detail-show"></div>
            <span class="loadding-lab">加载中，请稍后……</span>
        </div>

    </div>
    <div class="weixin-tip">
        <div class="wechat-line"></div>
        <div class="wechat-brow androidChat"></div>
        <div class="tkl-layer">
            <div class="mid-txt"><span>或</span></div>
            <div class="tkl-code yjfz_copy">
                <div class="code">
                    <textarea class="tkl-text" onfocus="iptNum(this, true);" oninput="iptNum(this, false);">{{$goods->tpwd}}</textarea>
                </div>
                <span class="keycope" data-tpwd="">一键复制</span>

            </div>
            <p>长按复制上方淘口令，打开手机淘宝购买</p>
        </div>


        <div class="weixin-cover"></div>
    </div>
    <div class="detail-buy">
        <div class="collect">
            <i class="iconfont icon-star1"></i>
            <p class="pingfang">收藏</p>
        </div>
        @if($goods->coupon_status > 0)
            <a id="go_buy" href="{{$goods->coupon_click_url}}">
                <div class="go-buy">
                    <p class="coupon-amount">{{$goods->coupon_amount}} 元优惠券</p>
                    <p class="coupon-date">使用期限:{{$goods->coupon_start_time}} ~ {{$goods->coupon_end_time}}</p>
                </div>
            </a>
        @else
            <a id="go_buy" href="{{$goods->click_url}}">
                <div class="go-buy">
                    <p class="coupon-amount">￥{{$goods->coupon_price}}</p>
                    <p class="pingfang">去购买 </p>
                </div>
            </a>
        @endif

    </div>
    <div id="copy_dom"  class="copy_dom" style="display: none">{{$goods->tpwd}}</div>
@endsection
@section('script')
    <script src="{{asset('js/clipboard.min.js')}}"></script>
    <script>
        //文字输入
        function iptNum(ths,sta) {
            if(sta) {
                taoKeyNum = ths.value;
            }
            if(ths.value != taoKeyNum) {
                ths.value = taoKeyNum;
            }
        }
        //获取固件版本
        var getOsv = function () {
            var reg = /OS ((\d+_?){2,3})\s/;
            if (navigator.userAgent.match(/iPad/i) || navigator.platform.match(/iPad/i) || navigator.userAgent.match(/iP(hone|od)/i) || navigator.platform.match(/iP(hone|od)/i)) {
                var osv = reg.exec(navigator.userAgent);
                if (osv.length > 0) {
                    return osv[0].replace('OS', '').replace('os', '').replace(/\s+/g, '').replace(/_/g, '.');
                }
            }
            return '';
        };
        var osv = getOsv();
        var osvArr = osv.split('.');
        //初始化显示ios9引导
        if (osvArr && osvArr.length > 0) {
            if (parseInt(osvArr[0]) > 0 && parseInt(osvArr[0]) < 10) {
                $('.tkl-code').removeClass('yjfz_copy');
                $('.keycope').remove();
            }
        }

        function is_weixin(){
            var ua = navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i)=="micromessenger") {
                return true;
            } else {
                return false;
            }
        }
        function is_ios(){
            var ua = navigator.userAgent.toLowerCase();
            if(/iphone|ipad|ipod/.test(ua) ){
                return true;
            } else {
                return false;
            }
        }
        function is_android(){
            var ua = navigator.userAgent.toLowerCase();
            if(/android|adr|linux/.test(ua)){
                return true;
            } else {
                return false;
            }
        }


        var isLoad = false;
        var goodsId = $('.pic-detail-btn').data('goodsid');
        $('.pic-detail-btn span.pic-detail-btn-span').click(function(){
            if($('.pic-detail-show').css('display') == 'none'){
                if(!$(this).hasClass('cur')){
                    $(this).addClass('cur');
                }
                $('.pic-detail-show').css('display','block');
            }else{
                $(this).removeClass('cur');
                $('.pic-detail-show').css('display','none');
            }

            if(!isLoad){
                $('span.loadding-lab').fadeIn(300);
                setTimeout(function(){
                    $.ajax({
                        type: "get",
                        async: false,
                        url: 'http://hws.m.taobao.com/cache/mtop.wdetail.getItemDescx/4.1/?&data={"item_num_id":"'+goodsId+'"}&type=jsonp',
                        dataType: "jsonp",
                        jsonp: "callback",
                        jsonpCallback:"showTuwen",
                        success: function(jsonp){

                            $('span.loadding-lab').fadeOut(300);
                            if(jsonp.data.images.length>0){
                                for(var i = 0 ; i < jsonp.data.images.length ; i++){
                                    $('.pic-detail-show').append('<p><img src="'+jsonp.data.images[i]+'"/></p>');
                                }
                            }

                            isLoad = true;
                        },
                        error: function(){
                        }
                    });
                },300);
            }

        });

        var kycopy = 1,ios = 1;
        function isIOS10() {
            //获取固件版本
            var getOsv = function () {
                var reg = /OS ((\d+_?){2,3})\s/;
                if (navigator.userAgent.match(/iPad/i) || navigator.platform.match(/iPad/i) || navigator.userAgent.match(/iP(hone|od)/i) || navigator.platform.match(/iP(hone|od)/i)) {
                    var osv = reg.exec(navigator.userAgent);
                    if (osv.length > 0) {
                        return osv[0].replace('OS', '').replace('os', '').replace(/\s+/g, '').replace(/_/g, '.');
                    }
                }else{
                    ios = 0;
                }
                return '';
            };
            var osv = getOsv();
            var osvArr = osv.split('.');
            //初始化显示ios9引导
            if (osvArr && osvArr.length > 0) {
                if (parseInt(osvArr[0]) >= 10) {
                    return true
                }
            }
            return false
        }

        var openApp = function(url) {
            var appUrl = url.replace("http://", "").replace("https://", "");
            var ifr = document.createElement('iframe');
            ifr.src = 'taobao://' + appUrl;
            ifr.style.display = 'none';
            document.body.appendChild(ifr);
            window.location = url;
        };
        var openAppIos9 = function(url) {
            var appUrl = url.replace("http://", "").replace("https://", ""),
                newUrl = 'taobao://' + appUrl;
            window.location = newUrl;
            window.setTimeout(function () {
                window.location = url;
            }, 3000);
        };
        var is_weixin = function() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                return true;
            } else {
                return false;
            }
        };
        var kycopy = 1,ios = 1;
        function isIOS10() {
            //获取固件版本
            var getOsv = function () {
                var reg = /OS ((\d+_?){2,3})\s/;
                if (navigator.userAgent.match(/iPad/i) || navigator.platform.match(/iPad/i) || navigator.userAgent.match(/iP(hone|od)/i) || navigator.platform.match(/iP(hone|od)/i)) {
                    var osv = reg.exec(navigator.userAgent);
                    if (osv.length > 0) {
                        return osv[0].replace('OS', '').replace('os', '').replace(/\s+/g, '').replace(/_/g, '.');
                    }
                }else{
                    ios = 0;
                }
                return '';
            };
            var osv = getOsv();
            var osvArr = osv.split('.');
            //初始化显示ios9引导
            if (osvArr && osvArr.length > 0) {
                if (parseInt(osvArr[0]) >= 10) {
                    return true
                }
            }
            return false
        }

        //ios版本

        if(isIOS10()){
            kycopy = 1;
        }else{
            kycopy = 0
        }
        //文字输入
        function iptNum(ths,sta) {
            if(sta) {
                taoKeyNum = ths.value;
            }
            if(ths.value != taoKeyNum) {
                ths.value = taoKeyNum;
            }
        }

        //不支持clip
        if(kycopy == 0 && ios == 1){
            $('.tkl-code').removeClass('yjfz_copy');
            $('.keycope').remove();
            document.addEventListener("selectionchange", function (e) {
                if (window.getSelection().anchorNode.parentNode.id == 'code1_ios' && document.getElementById('code1_ios').innerText != window.getSelection()) {
                    var key = document.getElementById('code1_ios');
                    window.getSelection().selectAllChildren(key);
                }
                if (window.getSelection().anchorNode.parentNode.id == 'code2_ios' && document.getElementById('code2_ios').innerText != window.getSelection()) {
                    var key = document.getElementById('code2_ios');
                    window.getSelection().selectAllChildren(key);
                }
            }, false);
        }else{

            if(ios == 1){
                var clipboard = new Clipboard('.keycope', {
                    //动态设置复制内容
                    target:function() {
                        // return trigger.getAttribute('aria-label');
                        return document.querySelector('.copy_dom');
                    }
                });

                clipboard.on('success', function(e){
                    $('.copy_dom').html('');

                    e.trigger.innerHTML="已复制";
                    e.trigger.style.background = "#67cf84";
                    e.trigger.parentNode.style.borderColor = "#67cf84";
                    e.clearSelection();
                });

                clipboard.on('error', function(e) {
                    $('.copy_dom').html('');
                    e.trigger.style.background = "#f47171";
                    e.trigger.parentNode.style.borderColor = "#f47171";
                    e.trigger.innerHTML="复制失败";
                });

                $('.yjfz_copy textarea').remove();
            }else{

                //一键复制!ios
                var dseClip = new Clipboard('.keycope', {
                    text: function(trigger) {
                        return document.querySelector('.copy_dom').innerHTML;
                    }
                });
                dseClip.on('success', function(e) {
                    e.trigger.style.background = "#67cf84";
                    e.trigger.parentNode.style.borderColor = "#67cf84";
                    e.trigger.innerHTML="已复制";
                    e.clearSelection();
                });
                dseClip.on('error', function (e) {

                    e.trigger.style.background = "#f47171";
                    e.trigger.parentNode.style.borderColor = "#f47171";
                    e.trigger.innerHTML="复制失败";
                    e.clearSelection();
                });
            }

        }

        $("#go_buy").click(function (event) {


            var _url = $(this).attr('href') ? $(this).attr('href') : $(this).data('href');

            if (is_weixin()) {
                event.preventDefault();
                $('.weixin-tip').css('display','block');
                $('.tkl').css('display','none');
                $('.buy-wrapper').css('display','none');

                if($(this).data("href")){
                    var _url = $(this).data("href");
                }else{
                    var _url = $(this).attr("href");
                }
                if (is_ios()) {
                    $('.wechat-brow').addClass('iosChat');
                } else if (is_android()) {
                    $('.wechat-brow').addClass('androidChat');
                }
                $('#myVideo').css('display','none');

            } else {
                // window.location.href = _url;
                // return false;
            }

        });
        //微信点击站外链接弹出提示
        $('.weixin-cover').click(function(){

            $('.weixin-tip').css('display','none');
            $('.tkl').css('display','block');
            $('.buy-wrapper').css('display','block');
            $('#myVideo').css('display','block');
        });
        $('.collect').on('click',function () {
            var url                         =   "{{url('collect',['id'=>$goods->id])}}";
            $.get(url,{},function (response) {
                if(response.status==1){
                    toastr.options = {
                                 closeButton: false,
                                 debug: false,
                                 progressBar: true,
                                 positionClass: "toast-top-center",
                                 onclick: null,
                                 showDuration: "300",
                                 hideDuration: "1000",
                                 timeOut: "2000",
                                 extendedTimeOut: "1000",
                                 showEasing: "swing",
                                 hideEasing: "linear",
                                 showMethod: "fadeIn",
                                 hideMethod: "fadeOut"
                         };
                    toastr.success(response.message);
                }
            },'json')
        });
    </script>
@endsection